<template>
	<view id="topic">
		<SearchBar :flag="1"></SearchBar>
		<topic-scroll :title="title1" >
			<topicBar :attentions="topicArr['time'].list" :flag="flag0"></topicBar>
		</topic-scroll>
		<topic-scroll :title="title2">
			<topicBar :attentions="topicArr['hot'].list" :flag="flag1"></topicBar>
		</topic-scroll>
		<topic-scroll :title="title3">
			<NewTopicBar :attentions="topicArr['time'].list"></NewTopicBar>
		</topic-scroll>
	</view>
</template>

<script>
	import SearchBar from '../../components/common/SearchBar.vue'
	import TopicScroll from './topicItem/TopicScroll.vue'
	import TopicBar from './topicItem/topicBar.vue'
	import NewTopicBar from './topicItem/NewTopicBar.vue'
	export default {
		name: 'Topic',
		components: {
			SearchBar,
			TopicScroll,
			TopicBar,
			NewTopicBar
		},
		onLoad() {
		},
		data() {
			return {
				flag0:0,
				flag1:1,
				topicArr:{
					'time':{num:1,page:1,pageSize:50,list:[]},
					'hot':{num:2,page:1,pageSize:50,list:[]}
				},
				title1: '我的关注',
				title2: '今日推荐',
				title3: '新增话题'
			}
		},
		methods: {
			async getTopicData(type) {
				const res = await this.$myRequest({
					url:'/topic/selectTopicAll',
					data:{
						num:this.topicArr[type].num,
						page:1,
						pageSize:50
					}
				})
				console.log(res)
				if(res.data.data.list.length != 0) {
					this.topicArr[type].list = res.data.data.list
				}
			}
		},
		onShow() {
			this.getTopicData('time')
			this.getTopicData('hot')
		}
	}
</script>

<style>
</style>
